import React from 'react';

import { Card, Empty, Tag, Badge } from 'antd';
import ProDescriptions from '@ant-design/pro-descriptions';

import * as utils from '@/utils/utils';
import * as c from '@/services/consts';

export type UserStatusFormProps = {
  loading: boolean;
  model: API.UserModel | undefined;
  style?: React.CSSProperties | undefined;
};

const Form: React.FC<UserStatusFormProps> = (props) => {
  const { loading, model, style } = props;

  const renderExpireTime = () => {
    if (!model || !model.serviceType) {
      return <></>;
    }
    if (model.serviceType.expireDays < 1) {
      return (
        <span style={{ color: '#ff4d4f' }}>
          {utils.formatUtcToLocal(model.serviceType.expireTime)}
        </span>
      );
    } else if (
      model.serviceType.expireDays >= 1 &&
      model.serviceType.expireDays <= 7
    ) {
      return (
        <span style={{ color: '#faad14' }}>
          {utils.formatUtcToLocal(model.serviceType.expireTime)}
        </span>
      );
    } else {
      return (
        <span style={{ color: '' }}>
          {utils.formatUtcToLocal(model.serviceType.expireTime)}
        </span>
      );
    }
  };

  const renderAuthInfo = () => {
    console.log('renderAuthInfo: ', model);
    if (!model || !model.serviceType) {
      return null;
    }

    const st = model.serviceType;

    return (
      <>
        <Tag
          color={
            st.memberLevel > c.MemberLevel.Free.value ? 'success' : 'default'
          }
        >
          {st.name}
        </Tag>
        {renderExpireTime()}
      </>
    );
  };

  const renderSubInfo = () => {
    if (!model || !model.subscribeStatus) {
      return null;
    }

    const subInfo = model.subscribeStatus;
    if (subInfo.subscribeType == c.SubscribeType.Subscribe) {
      let text = `${subInfo.subscribeStatus} - (${subInfo.serviceTypeName})${subInfo.serviceSetName}`;

      if (subInfo.channelExpireTime) {
        text += ` (${utils.formatUtcToLocal(subInfo.channelExpireTime)})`;
      }

      if (subInfo.channelItemId) {
        text += ` ${subInfo.channelItemId}`;
      }
      if (
        subInfo.channelNextItemId &&
        subInfo.channelItemId != subInfo.channelNextItemId
      ) {
        text += ` : ${subInfo.channelNextItemId}`;
      }
      return <>{text}</>;
    }

    return null;
  };

  if (loading) {
    return (
      <Card style={{ marginTop: 20, minHeight: 200 }} loading={loading}></Card>
    );
  }

  if (!model) {
    return (
      <Card style={{ marginTop: 20, minHeight: 200 }}>
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description={<span>暂无数据</span>}
        ></Empty>
      </Card>
    );
  }

  return (
    <Card style={style}>
      <ProDescriptions
        title="用户信息"
        layout="horizontal"
        column={3}
        dataSource={model}
      >
        <ProDescriptions.Item label="用户名" dataIndex="username" />
        <ProDescriptions.Item
          label="状态"
          dataIndex="status"
          render={(val) => {
            if (val == true) {
              return <Badge status="success" text="启用" title="启用" />;
            } else {
              return <Badge status="success" text="禁用" title="禁用" />;
            }
          }}
        />
        <ProDescriptions.Item
          label="白名单用户"
          dataIndex="whitelistUser"
          renderText={(val) => {
            if (val == true) {
              return '是';
            }

            return null;
          }}
        />
        <ProDescriptions.Item
          label="当前授权"
          dataIndex="username"
          render={() => {
            return renderAuthInfo();
          }}
        />
        <ProDescriptions.Item
          label="当前订阅"
          dataIndex="username"
          span={2}
          render={() => {
            return renderSubInfo();
          }}
        />
      </ProDescriptions>
    </Card>
  );
};

export default Form;
